<template>
  <div class="header-wrap">
    <div class="header-left">
      <span class="logo">logo</span>
      <div class="control">
        <svg-icon
          icon-class="arrow-left"
          class="control-item"
          @click.native="handleClickBack"
        ></svg-icon>
        <svg-icon
          icon-class="arrow-right"
          class="control-item"
          @click.native="handleClickGo"
        ></svg-icon>
      </div>
      <a-input-search
        placeholder="input search text"
        style="width: 200px"
        @search="onSearch"
      />
    </div>
    <div class="header-right" @click="loginModalvisible = true">
      <a-avatar icon="user" :src="uid ? user.profile.avatarUrl : ''" />
      <span class="user">{{uid ? user.name : '未登录'}}</span>
    </div>

    <a-modal v-model="loginModalvisible" title="登录" :footer="null">
      <a-form :form="loginForm" @submit="handleSubmit">
        <a-form-item>
          <a-input
            v-decorator="[
              'phoneNumber',
              { rules: [{ required: true, message: '请输入手机号' }] },
            ]"
            placeholder="手机号"
          >
            <a-icon
              slot="prefix"
              type="phone"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码' }] },
            ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item style="text-align: center">
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { validatePhone } from '@/assets/utils/index.js'
import { mapGetters } from 'vuex'
import {_login} from '@/api/user.js'
export default {
  data() {
    return {
      // uid: this.$store.getters.GETUID,
      // user: this.$store.getters.GETUSER,
      loginModalvisible: false,
    }
  },
  beforeCreate(context) {
    // 登录表单
    this.loginForm = this.$form.createForm(this, { name: 'normal_login' })
  },
  beforeMount() {
    if(localStorage.getItem('user')) this.$store.commit('SAVEUSERINFO', JSON.parse(localStorage.getItem('user')))
  },
  computed: {
    ...mapGetters({uid: 'GETUID', user: 'GETUSER'})
  },
  methods: {
    // 搜索
    onSearch() {},
    // 点击 后退
    handleClickBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    // 点击 前进
    handleClickGo() {
      this.$router.go(1)
    },
    // 用户登录
     handleSubmit(e) {
      e.preventDefault()
      this.loginForm.validateFields(async (err, values) => {
        if (!err) {
          if (!validatePhone(values.phoneNumber)) return false
          const res = await _login({ phone: values.phoneNumber, password: values.password})
          if(res.code !== 200) return false
          this.$store.commit('SAVEUSERINFO', res)
          this.loginModalvisible = false
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header-wrap {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 2px 6px rgba(61, 90, 254, 0.15);
  .header-left {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 80px;
    margin: 0px 25px;
  }
  .control {
    width: 150px;
    display: inline-block;
  }
  .control-item {
    cursor: pointer;
    width: 2em;
    height: 2em;
  }
  .control-item:hover {
    transform: scale(1.1);
  }
  .user {
    margin-right: 15px;
  }
  .header-right {
    .avatar {
      width: 45px;
      height: 45px;
    }
    cursor: pointer;
  }
}
</style>
